<template>
  <!-- 我的音乐右侧歌曲列表 -->
  <div class="right-sings">
    <div class="title">
      <div class="left">
        <span class="sp-1">歌曲列表</span>
        <span class="sp-2">101首歌</span>
      </div>
      <div class="right">
        <span>播放：<i>127</i>次</span>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <div class="list-table">
        <div class="head">
          <div class="h-1"></div>
          <div class="h-2">标题</div>
          <div class="h-3">时长</div>
          <div class="h-4">歌手</div>
          <div class="h-5">专辑</div>
        </div>
        <ul class="body">
            <li class="behind" v-for="i,index in 10" :key="index">
              <div class="h-1 li-1">
                <span>{{index + 1}}</span>
                <span class="icon"></span>
              </div>
              <div class="h-2 li-2">
                <span title="删了吧">删了吧</span>
                <span> - (要不你还是把我删了吧)</span>
              </div>
              <div class="h-3 li-3">
                <!-- <span>03:44</span> -->
                <div class="icon-team">
                  <i class="icon-t-1" title="添加到播放列表"></i>
                  <i class="icon-t-2" title="收藏"></i>
                  <i class="icon-t-3" title="分享"></i>
                  <i class="icon-t-4" title="下载"></i>
                  <i class="icon-t-5" title="删除"></i>
                </div>
              </div>
              <div class="h-4 li-4">
                <span title="马思唯">于佰万</span>
              </div>
              <div class="h-5 li-5">
                <span title="删了吧">删了吧</span>
              </div>
            </li>
        </ul>
      </div>
    </div>
    <!-- 评论区组件 -->
    <comment-write></comment-write>
  </div>
</template>

<script>
// 评论区
import commentWrite from '@/components/comment-write'
export default {
    name:'right-sings',
    components:{commentWrite},
}
</script>

<style scoped lang="scss">
  .right-sings{
    width: 741px;
    .title{
      width: 100%;
      border-bottom: 2px solid #c20c0c;
      line-height: 35px;
      height: 35px;
      display: flex;
      justify-content: space-between;
      .left{
        .sp-1{
          font-size: 20px;
          color: #333;
        }
        .sp-2{
          font-size: 12px;
          color: #666;
          margin-left: 20px;
        }
      }
      .right{
        margin-right: 20px;
        span{
          font-size: 12px;
          color: #666;
          i{
            color: #c20c0c;
            font-weight: bold;
          }
        }
      }
    }
    .list{
      width: 100%;
      .list-table{
        width: 100%;
        font-size: 12px;
        .h-1{
          width: 80px;
        }
        .h-2{
          width: 318px;
          border-left: 1px solid #d9d9d9;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .h-3{
          width: 120px;
          border-left: 1px solid #d9d9d9;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .h-4{
          width: 100px;
          border-left: 1px solid #d9d9d9;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .h-5{
          width: 120px;
          border-left: 1px solid #d9d9d9;
          padding: 0 10px;
          box-sizing: border-box;
        }
        .head{
          width: 100%;
          height: 35px;
          line-height: 35px;
          background: url('@/assets/table.png') no-repeat;
          background-position: 0 0;
          background-repeat: repeat-x;
          display: flex;
          
        }
        .body{
          border-bottom: 1px solid #d9d9d9;
          li:nth-child(odd){
            background-color: #f7f7f7;
          }
          li:nth-child(even){
            background-color: #fff;
          }
          .behind{
            display: flex;
            // height: 70px;
            height: 30px;
            background-color: #f7f7f7;
            &>div{
              border: none;
              padding: 6px 10px;
              box-sizing: border-box;
            }
            .li-1{
              span{
                display: inline-block;
                width: 24px;
                text-align: center;
                vertical-align: middle;
                color: #999;
              }
              .icon{
                display: inline-block;
                width: 17px;
                height: 17px;
                background: url('@/assets/table.png') no-repeat;
                background-position: 0 -103px;
                vertical-align: middle;
                margin-left: 15px;
                cursor: pointer;
                &:hover{
                  background-position: 0 -128px;
                }
              }
            }
            .li-2{
              span:nth-child(1){
                line-height: 18px;
                cursor: pointer;
                color: #333;
                &:hover{
                  text-decoration: underline;
                }
              }
              span:nth-child(2){
                line-height: 18px;
                color: #999;
              }
            }
            .li-3{
              display: flex;
              color: #333;
              span{
                  line-height: 18px;
              }
              .icon-team{
                .icon-t-1{
                  width: 14px;
                  height: 14px;
                  display: inline-block;
                  cursor: pointer;
                }
                .icon-t-2,.icon-t-3,.icon-t-4,.icon-t-5{
                  width: 18px;
                  height: 16px;
                  display: inline-block;
                  cursor: pointer;
                  margin-left: 3px;
                }
                .icon-t-1{
                  background: url('@/assets/icon.png') no-repeat;
                  background-position: 0 -700px;
                  &:hover{
                    background-position: -22px -700px;
                  }
                }
                .icon-t-2{
                  background: url('@/assets/table.png') no-repeat;
                  background-position: 0 -172px;
                  &:hover{
                    background-position: -20px -172px;
                  }
                }
                .icon-t-3{
                  background: url('@/assets/table.png') no-repeat;
                  background-position: 0 -193px;
                  &:hover{
                    background-position: -20px -193px;
                  }
                }
                .icon-t-4{
                  background: url('@/assets/table.png') no-repeat;
                  background-position: -81px -172px;
                  &:hover{
                    background-position: -104px -172px;
                  }
                }
                .icon-t-5{
                  background: url('@/assets/table.png') no-repeat;
                  background-position: 0 -215px;
                  &:hover{
                    background-position: -20px -215px;
                  }
                }
              }
            }
            .li-4{
              span{
                line-height: 18px;
                color: #333;
                cursor: pointer;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
            .li-5{
              span{
                line-height: 18px;
                color: #333;
                cursor: pointer;
                &:hover{
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }
    }
  }
</style>

<style scoped>
/* 评论区单独样式 */
::v-deep .p-word{
  width: 598px;
}
::v-deep .p-title .sp-1{
  margin-left: 40px;
}
::v-deep .p-content{
  padding: 0 40px;
  box-sizing: border-box;
}
</style>